<template>
  <div class="dashboard-container">
    <h2 style="color: darkslateblue">学生成绩录入</h2>
    <!-- 查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="dataQuery.name"
          suffix-icon="el-icon-search"
          placeholder="学生学号"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()"
        >查询</el-button
      >
    </el-form>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="name" label="课程" />
  <el-table-column prop="studentNumber" label="学号" />
      <el-table-column prop="classAcademicYear" label="学年" />
      <el-table-column prop="classSemester" label="学期" />
      <el-table-column label="任课教师" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text">{{ scope.row.teacherName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="classScore" label="成绩" />

      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 10px"
            icon="el-icon-edit"
            @click="editForm(scope.row.id)"
            >修改</el-button
          >
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 10px"
            @click="InsertStudentScordForm(scope.row.id)"
            >录入<i class="el-icon-upload el-icon--right"
          /></el-button>
          <el-button
            type="danger"
            size="mini"
            style="margin-right: 10px"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id, scope.row.isConfirm)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-sizes="[5, 10, 15, 20, 50, 100, 1000]"
      :page-size="limitNumber"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="getList"
    />

    <!-- <component :is="currentRole" /> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import adminDashboard from "./admin";
import editorDashboard from "./editor";

import courseclassApi from "@/api/te/courseclass";

export default {
  name: "Dashboard",
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: "adminDashboard",
      list: [],
      courseclass: {
        // id: "11111",
        // courseId: '',
        // teacherId: '',
        // limitNumber: 50,
        // weekBegin: 1,
        // weekEnd: 16,
        // dayBegin: 1,
        // dayEnd: 2,
        // state: 0,
        // classPlace: "南苑一栋C402",
      },
      dialogVisible: false,

      // 分页用的data
      page: 1, // 当前页
      limitNumber: 10, // 每页记录数
      total: 0, // 总记录数

      dialogEditFormVisible: false, // 修改对话框状态
      dialogConfirmFormVisible: false, // "未确定"对话框状态
      dialogInfoFormVisible: false,
      multipleSelection: [], // 多选的对象数组
      dataQuery: {}, // 筛选条件封装对象
    };
  },
  computed: {
    ...mapGetters(["roles"]),
  },
  created() {
    if (!this.roles.includes("admin")) {
      this.currentRole = "editorDashboard";
    }
    this.getList();
  },
  methods: {
    // 获取所有数据
    getList() {
      courseclassApi
        .pageList(this.page, this.limitNumber, this.dataQuery)
        .then((res) => {
          console.log(res);
          this.list = res.data.list;
          this.total = res.data.total;
        });
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
.app-main {
  padding-left: 50px;
  padding-right: 50px;
}
</style>